:root {
  //深色
  --color-dark: #142030;
  --color-dark-button: #142030;
  --color-dark-light: #3f4e60;
  --color-dark-contrast: #ffffff;
  //浅色
  --color-light: #ffffff;
  --color-light-button: #ffffff;
  --color-light-light: #ffffff;
  --color-light-contrast: #142030;
  //错误
  --color-danger: #eb445a;
  --color-danger-button: #eb445a;
  --color-danger-light: #f16b7d;
  --color-danger-contrast: #ffffff;
  //成功
  --color-success: #2dd36f;
  --color-success-button: #2dd36f;
  --color-success-light: #55e08d;
  --color-success-contrast: #ffffff;
  //警告
  --color-warning: #ffc409;
  --color-warning-button: #ffc409;
  --color-warning-light: #ffd54b;
  --color-warning-contrast: #000000;
  //中间色
  --color-medium: #999;
  --color-medium-button: #999;
  --color-medium-light: #ccc;
  --color-medium-contrast: #ffffff;
  //主色
  --color-primary: #1890ff;
  --color-primary-button: #1890ff;
  --color-primary-light: #40a9ff;
  --color-primary-contrast: #ffffff;
  //字体大小
  --font-size-maximum: 24px;
  --font-size-bigger: 20px;
  --font-size-large: 16px;
  --font-size: 14px;
  --font-size-small: 12px;
  --font-size-tiny: 10px;
  //圆角大小
  --radius-width: 5px;
  //间隔
  --space-width: 12px;
  --space-width-half: 6px;
  //背景色
  --background: #f9f9f9;
  --hover-background: #eee;
  --light-background: #ffffff;
  //边框色
  --border-color: #ddd;
  --border-color-light: #eee;
  //按钮高度
  --button-height-maximum: 96px;
  --button-height-bigger: 72px;
  --button-height-large: 48px;
  --button-height: 38px;
  --button-height-small: 30px;
  --button-height-tiny: 24px;
  //图标字体
  --fa-style-family: "Font Awesome 6";
  //
  --color-base: var(--color-light);
  --color-base-button: var(--color-light-button);
  --color-base-light: var(--color-light-light);
  --color-base-contrast: var(--color-light-contrast);
}
//系统切换到深色
@media (prefers-color-scheme: dark) {
  :root {

  }
}
body, html {
  font-size: var(--font-size);
  padding: 0;
  margin: 0;
  font-weight: normal;
  color: var(--color-dark);
  background: var(--background);
  font-family: Arial, sans-serif;
}
*{box-sizing: border-box;}
a{text-decoration: none;}
a:hover{text-decoration: underline;}
//常用
$sizes: tiny, small, large, bigger, maximum;
$placements: left, top, right, bottom;
$colors: dark, primary, success, warning, danger, medium, light;
.padding{padding: var(--space-width);}
.padding-half{padding: var(--space-width-half);}
.padding-start-half{padding-left: var(--space-width-half);}
.padding-end-half{padding-right: var(--space-width-half);}
.auto-margin{ margin: 0 auto; }
.margin{margin: var(--space-width);}
.margin-half{margin: var(--space-width-half);}
.border{
  border: solid 1px var(--border-color);
  &.hover-border{cursor: pointer;transition: border-color .3s;}
  &.hover-border:hover{ border-color: var(--color-primary); }
}
.border-dashed{
  border: dashed 1px var(--border-color);
  &.hover-border{cursor: pointer;transition: border-color .3s;}
  &.hover-border:hover{ border-color: var(--color-primary); }
}
@each $placement in $placements {
  .padding-#{$placement}{
    padding-#{$placement}: var(--space-width);
  }
  .padding-#{$placement}-half{
    padding-#{$placement}: var(--space-width-half);
  }
  .margin-#{$placement}{
    margin-#{$placement}: var(--space-width);
  }
  .margin-#{$placement}-half{
    margin-#{$placement}: var(--space-width-half);
  }
  .border-#{$placement}{
    border-#{$placement}: solid 1px var(--border-color);
  }
}
@each $color in $colors {
  .#{"" + $color}{
    --color-base: var(--color-#{$color});
    --color-base-button: var(--color-#{$color}-light);
    --color-base-light: var(--color-#{$color}-light);
    --color-base-contrast: var(--color-#{$color}-contrast);
  }
  .#{"" + $color}-text{
    color: var(--color-#{$color});
  }
  .#{"" + $color}-background{
    background-color: var(--color-#{$color});
    color: var(--color-#{$color}-contrast);
  }
  .#{"" + $color}-border{
    --border-color: var(--color-#{$color});
    border-color: var(--color-#{$color});
  }
}
@each $size in $sizes {
  .text-#{"" + $size}{font-size: var(--font-size-#{$size});}
}
.light-border { border-color: var(--border-color-light); }
.background{ background-color: var(--background); }
.hover-background{ background-color: var(--hover-background); }
.radius{ border-radius: var(--radius-width); }
.overflow-hidden{ overflow: hidden!important; }
.overflow-auto{ overflow: auto!important; }
.text-bold{ font-weight: bold; }
.text-center{ text-align: center; }
.text-right{ text-align: right; }
.justify-center {
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.flex-row { display: flex; flex-flow: row; }
.flex-column { display: flex; flex-flow: column; }
.relative{ position: relative; }
.absolute{ position: absolute; }
.full-view{ width: 100%; height: 100%; position: absolute; }
//斜线背景
.line135deg-background {
  background-image: linear-gradient(
                  135deg,
                  rgba(214, 214, 214, 0.2) 0, rgba(214, 214, 214, .2) 25%, transparent 25%, transparent 50%,
                  rgba(214, 214, 214, .2) 50%, rgba(214, 214, 214, .2) 75%, transparent 75%, transparent
  );
  background-size: 10px 10px;
}
.line45deg-background {
  background-image: linear-gradient(
                  45deg,
                  rgba(214, 214, 214, 0.2) 0, rgba(214, 214, 214, .2) 25%, transparent 25%, transparent 50%,
                  rgba(214, 214, 214, .2) 50%, rgba(214, 214, 214, .2) 75%, transparent 75%, transparent
  );
  background-size: 10px 10px;
}
.max-one-line-text{
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-break:break-all;
  display:-webkit-box!important;
  -webkit-line-clamp: 1;
  -webkit-box-orient:vertical;
}
.max-two-line-text{
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-break:break-all;
  display:-webkit-box!important;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
}
.max-three-line-text{
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-break:break-all;
  display:-webkit-box!important;
  -webkit-line-clamp: 3;
  -webkit-box-orient:vertical;
}
//UI样式
.ui {
  &.flex-item{
    display: flex;
    flex-flow: row;
    .start{ padding-right: var(--space-width); }
    .center{ flex: 1; }
    .end{
      padding-left: var(--space-width);
    }
  }
  &.form {
    .field{
      padding-top: var(--space-width);
      &:first-child{padding-top: 0;}
      .label{margin-bottom: var(--space-width-half);display: block;font-weight: bold;}
      &.inline {
        display: flex;
        flex-flow: row;
        .label{ padding-right: var(--space-width); margin-bottom: 0; display: flex; flex-flow: column; justify-content: center; }
        .input-wrap{
          flex: 1;
        }
      }
    }
    .fields{
      display: flex;
      flex-flow: row;
      padding-top: var(--space-width);
      .field{padding-top: 0;margin-right: var(--space-width);
        &:last-child{
          margin-right: 0;
        }
      }
      &:first-child{
        padding-top: 0;
      }
    }
  }
  //图片列表
  &.images{
    overflow: auto;
    .image{
      width: 120px;
      height: 120px;
      display: flex;
      flex-flow: column;
      justify-content: center;
      border-radius: var(--radius-width);
      overflow: hidden;
      float: left;
      margin: var(--space-width-half);
      position: relative;
      transition: 300ms;
      user-select: none;
      img{
        max-width: 100%;
        margin: 0 auto;
      }
      .remove{
        cursor: pointer;
        position: absolute;
        right: var(--space-width-half);
        top: var(--space-width-half);
        width: 20px;
        height: 20px;
        display: flex;
        flex-flow: column;
        justify-content: center;
        text-align: center;
        background: rgba(0,0,0,.5);
        color: #fff;
        border-radius: 50%;
        opacity: 0;
        transition: 300ms;
      }
      &:hover{
        .remove{opacity: 1;}
      }
      &.plus{
        cursor: pointer;
        border: dashed 1px var(--border-color);
        color: var(--color-medium);
        text-align: center;
        transition: .3s;
        &:hover{
          border-color: var(--color-primary);
          color: var(--color-primary);
        }
        &:active{
          border-color: var(--color-primary-light);
          color: var(--color-primary-light);
        }
      }
    }
  }
  &.grid {
    display: grid;
    grid-gap: var(--space-width);
    gap: var(--space-width);
    .column {
      border-radius: var(--radius-width);
    }
    @for $i from 2 through 10 {
      &.col-#{$i} {
        grid-template-columns: repeat(auto-fill, minmax(calc(100%/#{$i} - var(--space-width)), 1fr));
      }
    }
  }
  &.view-1b1{
    position: relative;
    padding-top: 100%;
    overflow: hidden;
    display: block;
    .inner{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
  //按钮
  &.button{
    border: none;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    text-align: center;
    vertical-align: middle;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    border-radius: var(--radius-width);
    padding: 0 1rem;
    line-height: var(--button-height);
    height: var(--button-height);
    transition: all .3s ease-in-out;
    @each $color in $colors {
      &.#{$color} {
        --color-primary: var(--color-#{$color});
        --color-primary-light: var(--color-#{$color}-light);
        --color-primary-contrast: var(--color-#{$color}-contrast);
      }
    }
    @each $size in $sizes {
      &.#{$size} {
        --button-height: var(--button-height-#{$size});
      }
    };
    &:hover{
      background: var(--color-primary-light);
    }
    &:active{
      background: var(--color-primary);
    }
    &.linear{
      background-image: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary-light) 100%);
      background-size: 200% auto;
      &:hover{
        background-position: right center;
      }
    }
    &.loading{
      &::before{
        content: '';
        display: inline-block;
        width: .8em;
        height: .8em;
        border-radius: 50%;
        overflow: hidden;
        border-width: 1px;
        border-style: solid;
        border-color: var(--color-primary-contrast) var(--color-primary-contrast) transparent transparent;
        animation: rotate360 1s infinite linear;
        margin-right: .5em;
        transition: all .3s ease-in-out;
      }
    }
    //带有下方向箭头
    &.arrow-down{
      &::after{
        vertical-align: middle;
        margin-top: -.5rem;
        content: '';
        display: inline-block;
        width: .3rem;
        height: .3rem;
        overflow: hidden;
        border-width: 1px;
        border-style: solid;
        border-color: transparent var(--color-primary-contrast) var(--color-primary-contrast) transparent;
        transform: rotate(45deg);
        margin-left: .5rem;
        transition: all .3s ease-in-out;
      }
    }
    //等待激活
    &.waiting{
      line-height: calc(var(--button-height) - 2px);
      background: transparent;
      border: solid 1px var(--color-medium);
      color: var(--color-medium);
      &.clear{
        border-color: transparent!important;
      }
      &.loading::before{
        border-color: var(--color-medium) var(--color-medium) transparent transparent;
      }
      &.arrow-down::after{
        border-color: transparent var(--color-medium) var(--color-medium) transparent;
      }
      &:hover{
        border-color: var(--color-primary);
        color: var(--color-primary);
        &.loading::before{
          border-color: var(--color-primary) var(--color-primary) transparent transparent;
        }
        &.arrow-down::after{
          border-color: transparent var(--color-primary) var(--color-primary) transparent;
        }
      }
      &:active{
        border-color: var(--color-primary-light);
        color: var(--color-primary-light);
        &.loading::before{
          border-color: var(--color-primary-light) var(--color-primary-light) transparent transparent;
        }
        &.arrow-down::after{
          border-color: transparent var(--color-primary-light) var(--color-primary-light) transparent;
        }
      }
    }
    &.clear{
      border-color: transparent!important;
      background: transparent;
      color: var(--color-primary);
      &.loading::before{
        border-color: var(--color-primary) var(--color-primary) transparent transparent;
      }
      &:hover{
        color: var(--color-primary-light);
        &.loading::before{
          border-color: var(--color-primary-light) var(--color-primary-light) transparent transparent;
        }
      }
      &:active{
        color: var(--color-primary);
        &.loading::before{
          border-color: var(--color-primary) var(--color-primary) transparent transparent;
        }
      }
    }
    &.outline{
      line-height: calc(var(--button-height) - 2px);
      background: transparent;
      border: solid 1px var(--color-primary);
      color: var(--color-primary);
      &:hover{
        background: var(--color-primary);
        color: var(--color-primary-contrast);
      }
    }
    &.round{
      border-radius: 30px;
    }
    &.circle{
      width: var(--button-height);
      padding: 0;
      border-radius: 50%;
    }
    &.block{
      display: block;
    }
  }
  //
  &.tag{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.88);
    font-size: 12px;
    line-height: 20px;
    list-style: none;
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
    display: inline-block;
    height: auto;
    margin-inline-end: var(--space-width-half);
    padding-inline: var(--space-width-half);
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid #d9d9d9;
    border-radius: var(--radius-width);
    opacity: 1;
    transition: all 0.2s;
    text-align: start;
    &[color=pink], &.pink{
      color: #c41d7f;
      background: #fff0f6;
      border-color: #ffadd2;
    }
    &[color=red], &.red{
      color: #cf1322;
      background: #fff1f0;
      border-color: #ffa39e;
    }
    &[color=orange], &.orange{
      color: #d46b08;
      background: #fff7e6;
      border-color: #ffd591;
    }
    &[color=green], &.green{
      color: #389e0d;
      background: #f6ffed;
      border-color: #b7eb8f;
    }
    &[color=cyan], &.cyan{
      color: #08979c;
      background: #e6fffb;
      border-color: #87e8de;
    }
    &[color=blue], &.blue{
      color: #0958d9;
      background: #e6f4ff;
      border-color: #91caff;
    }
    &[color=purple], &.purple{
      color: #531dab;
      background: #f9f0ff;
      border-color: #d3adf7;
    }
  }
  //面包屑
  &.breadcrumb {
    display: flex;
    flex-flow: row;
    .item{
      color: var(--color-medium);
      a{color: var(--color-medium);
        &:hover{
          text-decoration: underline;
          color: var(--color-primary);
        }
      }
      &::after{
        content: ' / ';
        margin: 0 var(--space-width-half);
      }
      &:last-child::after{
        display: none;
      }
      &:last-child{
        color: var(--color-dark);
      }
    }
  }
  &.table{
    display: flex;
    flex-flow: column;
    background: var(--light-background);
    &.scroll-enable{flex: 1;overflow: hidden;}
    border: solid 1px var(--border-color);
    border-radius: var(--radius-width);
    .row{
      padding: var(--space-width-half);
      .col{
        padding: var(--space-width-half);
      }
    }
    .thead{
      border-bottom: solid 1px var(--border-color);
      background: var(--hover-background);
      font-weight: bold;
      .row{border-bottom: none;}
    }
    .tbody{
      flex: 1;
      overflow: auto;
      position: relative;
      .row{
        &:nth-child(even){
          background: var(--background);
        }
        border-bottom: solid 1px var(--border-color-light);
        &:last-child {
          border-bottom: solid 1px var(--border-color);
        }
      }
      &.empty {
        @extend .justify-center;
        @extend .line45deg-background;
        text-align: center;
      }
      .empty-list {
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        @extend .justify-center;
        @extend .line45deg-background;
      }
    }
    .tfoot{
      background: var(--hover-background);
    }
    @each $color in $colors {
      &.#{$color} {
        border-top: solid 2px var(--color-#{$color});
      }
    }
    &.selectable{
      .tbody .row{transition: background .3s;}
      .tbody .row:hover{background: var(--hover-background);}
    }
  }
  //网格
  &.row{
    display: flex;
    flex-flow: row;
    .col{
      &.auto-width{flex: 1;}
    }
    &.flex{
      .col{flex: 1;}
    }
  }
  //穿梭选择，无限层级选择
  &.multi-selector {
    white-space: nowrap;
    height: 150px;
    overflow: auto;
    overflow-y: hidden;
    .options{
      display: inline-block;
      height: 100%;
      width: 28%;
      min-width: 100px;
      max-width: 200px;
      overflow: auto;
      border: solid 1px var(--border-color);
      border-left-color: var(--border-color-light);
      border-right: none;
      background-color: var(--light-background);
      //position: relative;
      &:first-child{
        border-left-color: var(--border-color);
        border-start-start-radius: var(--radius-width);
        border-end-start-radius: var(--radius-width);
      }
      &:last-child{
        border-right: solid 1px var(--border-color);
        border-start-end-radius: var(--radius-width);
        border-end-end-radius: var(--radius-width);
      }
      .option{
        margin: var(--space-width-half);
        cursor: pointer;
        padding: var(--space-width-half) var(--space-width);
        white-space: normal;
        border-radius: var(--radius-width);
        .end{
          visibility: hidden;
        }
        &:hover{
          background: var(--hover-background);
        }
        &.selected{
          background: var(--color-primary);
          color: var(--color-primary-contrast);
          .end{
            visibility: visible;
          }
        }
        &.disabled{
          color: var(--color-medium);
          cursor: default;
        }
        &.title{
          margin: 0 0 var(--space-width-half) 0;
          border-width: 0 0 1px 0;
          text-align: center;
          &.fixed{
            position: fixed;
            left: 0;top: 0;
            width: 100%;
          }
        }
      }
    }
  }
  &.message{
    border-left:solid 3px var(--color-medium);
    background: var(--light-background);
    border-radius: var(--radius-width);
    padding: var(--space-width);
    &.error{border-color:#9f3a38; color: #9f3a38; background: #fff6f6;}
    &.info{border-color:#276f86; color:#276f86; background: #f8ffff;}
    &.warning{border-color:#573a08; color:#573a08; background: #fffaf3;}
  }
  &.modal-page{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow: hidden;
    display: none;
    .modal-background{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.5);
      transition: all .3s;
      z-index: 1001;
      opacity: 0;
    }
    .modal-container{
      position: fixed;
      z-index: 1002;
      left: -300px;
      width: 300px;
      height: 100%;
      background: var(--color-base);
      color: var(--color-base-contrast);
      overflow: hidden;
      transition: all .3s;
    }
    &.show{
      display: block;
    }
    &.open{
      .modal-background{opacity: 1;}
      .modal-container{left: 0;}
    }
    &.close{
      .modal-background{opacity: 0;}
      .modal-container{left: -300px;}
    }
    &.right{
      .modal-container{
        left: auto;
        right: -300px;
      }
      &.open{
        .modal-container{right: 0;}
      }
      &.close{
        .modal-container{right: -300px;}
      }
    }
  }
  //树结构
  &.tree{
    ul{margin: 0;padding: 0;}
    ul li{list-style-type: none;
      .item{position: relative;}
      ul{padding-left: 20px;}
    }
    &.linear-split{
      .item::after{
        position: absolute;
        content: '';
        display: block;
        height: 1px;
        bottom: 0;
        left: var(--space-width);
        width: calc(100% - 2 * var(--space-width));
        background: var(--border-color);
        background: -webkit-linear-gradient(right, var(--border-color) 0%, transparent 100%);
        background: linear-gradient(to left, var(--border-color) 0%, transparent 100%);
      }
    }
  }
  //输入框
  &.input{
    height: var(--button-height);
    border: solid 1px var(--border-color);
    background: transparent;
    transition: all .3s;
    display: flex;
    flex-flow: row;
    line-height: calc(var(--button-height) - 2px);
    border-radius: var(--radius-width);
    overflow: hidden;
    .prefix-icon{
      min-width: var(--button-height);
      text-align: center;
      @extend .justify-center;
    }
    input{
      flex: 1;
      background: transparent; border: none;
      outline: none;
      height: 100%;
      line-height: calc(var(--button-height) - 2px);
      width: 30px;
      color: var(--base-contrast, var(--color-base-contrast));
      &:first-child{
        padding-left: 1em;
      }
      &:last-child{
        padding-right: 1em;
      }
      &[type='number']::-webkit-inner-spin-button{-webkit-appearance: none;}
      &[type='number']::-webkit-outer-spin-button{-webkit-appearance: none;}
    }
    &:focus-within{
      border-color: var(--color-primary);
      box-shadow: 0 0 5px var(--color-primary);
    }
    @each $size in $sizes {
      &.#{$size} {
        --button-height: var(--button-height-#{$size});
      }
    }
    select{
      background: transparent;
      outline: none;
      border: none;
    }
    .button{
      --button-height: calc(var(--button-height) - 2px);
    }
  }

  //单选
  &.radio-buttons{
    display: flex;
    flex-flow: row;
    .radio-button{
      height: var(--button-height);
      line-height: calc(var(--button-height) - 2px);
      display: flex;
      flex-flow: column;
      flex: 1;
      text-align: center;
      justify-content: center;
      border-width: 1px 1px 1px 0;
      border-style: solid;
      border-color: var(--border-color);
      cursor: pointer;
      position: relative;
      transition: 300ms;
      &::before{
        content: '';
        width: 1px;
        height: var(--button-height);
        position: absolute;
        left: -1px;
        background: var(--border-color);
        transition: 300ms;
        opacity: 0;
      }
      &:first-child{
        border-width: 1px;
        &::before{display: none;}
      }
      &.checked{
        border-color: var(--color-primary);
        background: var(--color-primary);
        color: var(--color-primary-contrast);
        &::before{
          background: var(--color-primary);
          opacity: 1;
        }
      }
      &:first-child{border-radius: var(--radius-width) 0 0 var(--radius-width);}
      &:last-child{border-radius: 0 var(--radius-width) var(--radius-width) 0;}
    }
    @each $size in $sizes {
      &.#{$size} {
        --button-height: var(--button-height-#{$size});
      }
    }
  }
  &.page{
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    //颜色
    background: var(--color-base-light);
    color: var(--color-base-contrast);
    //消失
    transition: opacity .3s, left .3s;
    &.disappear{
      left: -10vw;
      opacity: 0;
      .page-header.fixed, .page-footer.fixed{
        left: -10vw;
      }
    }
    //头部
    .page-header{
      width: 100%;
      background: var(--color-base);
      position: relative;
      &.no-border{border-bottom: none;}
      &.transparent{background: transparent;border-bottom: none;}
      &.fixed{
        position: fixed;
        left: 0;
        top: 0;
        z-index: 2;
      }
      transition: opacity .3s, left .3s;
      &.disappear{
        opacity: 0;
      }
      &.translucent-bg{
        background: rgba(255,255,255, .8)!important;
        border-bottom: none;
      }
      .background-image{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 90%;
        overflow: hidden;
        image{
          width: 100%;
        }
      }
      .page-toolbar {
        .statusBarHeight {transition: height .3s;}
        .inner {
          position: relative;
          display: flex;
          flex-flow: row;
          min-height: 46px;
          .back-button {
            position: absolute;
            left: 6px;
            top: 0;
            display: flex;
            flex-flow: column;
            justify-content: center;
            height: 100%;
            padding: 0 var(--space-width-half);
            font-size: 11pt;
            color: var(--color-primary);
            font-weight: bold;
          }
          .page-title {
            flex: 1;
            text-align: center;
            display: flex;
            flex-flow: column;
            justify-content: center;
            font-weight: bold;
            font-size: 11pt;
            .sub-title {
              font-weight: normal;
              font-size: 8pt;
              padding-bottom: 3px;
            }
          }
        }
      }
      .header-filter {
        position: absolute;
        width: 100%;
        left: 0;
        display: flex;
        flex-flow: column;
        height: 0;
        background: var(--color-base);
        .scroll-view {
          flex: 1;
        }
        &.open {
          height: 30vh;
        }
      }
    }
    //主内容容器
    .page-container{
      width: 100%;
      flex: 1;
      position: relative;
      overflow: auto;
      &.fullscreen{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }
    }
    //底部
    .page-footer{
      width: 100%;
      background: var(--color-base);
      padding-bottom: var(--safe-area-inset-bottom);
      &.no-border{border-top: none;}
      &.transparent{background: transparent;border-top: none;}
      &.fixed{
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 2;
      }
      transition: opacity .3s, left .3s;
      &.translucent-bg{
        background: rgba(255,255,255, .6);
        border-top: none;
      }
    }
  }
}
//动画
@keyframes rotate360 {
  100%{ transform: rotate(360deg); }
}
//iPhone安全底部
.safe-area-bottom {
  &::after{
    content: '';
    display: block;
    height: var(--safe-area-inset-bottom);
  }
}